<script setup lang="ts">
import { ref } from 'vue';
import type { PropType } from 'vue';
import type { Discussion } from '@/types/types'
import { useRouter } from 'vue-router'
import escape2html from '@/api/escape2html'

const router = useRouter()
const { toHtml } = escape2html()

const props = defineProps({
    data: {
        type: Object as PropType<Discussion>,
        required: true
    }
})

// time stamp to time
const conventTime = (time: number) => {
    const date = new Date(time * 1000)
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    // const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
    // const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
    // const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    return `${year}-${month}-${day}`
}

</script>

<template>
    <div class="sayinglist">
        <!-- <div class="list-title">
            {{ props.data.topic }}
        </div> -->
        <div class="list-text">
            <span class="list-author">
                {{ props.data.nickName }}:
            </span>
            <div v-html="toHtml(props.data.content)"></div>
        </div>
        <div class="time">发布于 {{ conventTime(props.data.createAt) }}</div>
        <!-- <div class="list-line"></div> -->
    </div>
</template>

<style scoped>
.list-author {
    color: #f5900a;
    font-weight: 600;
}

.sayinglist {
    width: 100%;
    padding: 10px;
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    align-items: start;
    box-shadow: #eee 2px 2px 2px, #eee -2px -2px 2px;
}

.list-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    flex: 1;
    line-height: 30px;
    margin-left: 25px;
}

.list-title {
    font-weight: 600;
    font-size: 20px;
    position: relative;
    margin-left: 20px;
    color: #f5900a;
    cursor: pointer;
}

.list-line {
    height: 2px;
    width: 100%;
    margin-top: 7px;
    background-color: #f2ac1c;
}

.time {
    font-size: 13px;
    color: #cfcccd;
    margin-left: auto;
}

.list-text {
    margin-top: 10px;
    line-height: 28px;
}

.showall {
    cursor: pointer;
    color: #f2ac1c;
}

.list-title::before {
    content: "";
    display: inline-block;
    border-radius: 100%;
    height: 6px;
    width: 6px;
    background-color: #f5900a;
    position: absolute;
    top: 40%;
    left: -15px;
}
</style>